<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html"
      xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>vue基础知识</title>

    <style>
        .aa {
            width: 200px;
            height: 200px;
            background: red
        }

        .bb {
            width: 100px;
            height: 100px;
            background: aquamarine
        }

        .cc {
            width: 50px;
            height: 50px;
            background: royalblue
        }
    </style>
    <!--事件修饰符
        .stop     作用: 用来阻止事件冒泡  用来阻止事件继续向外传递
        .prevent  作用: 用来阻止标签的默认行为
        .self     作用: 只监听自身标签触发的事件
        .once     作用: 该事件只触发一次

        语法:      @事件名事件修饰符="事件处理函数"======> @click.stop="test"
    -->
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>

        <button @click="test">点我</button>
        <h1>stop</h1>
        <div :class="cls1" @click.self="test1">

            <div :class="cls2" @click.once="test2">

                <div :class="cls3" @click="test3"></div>
            </div>
        </div>


        <a href="http://www.baidu.com" @click.prevent="testHref">点我跳转</a>
        <a href="javascript:;" @click.prevent="testHref">点我</a>

        <button @click.once="test">点击</button>

        <!--
    事件修饰符: 用来对事件一些列描述修饰
    按键修饰符: 用来对键盘按键事件进行修饰 修饰符
               keyup keydown ...

        .enter   对键盘回车键修饰
        .tab     对键盘切换tab按键修饰
        .delete (捕获“删除”和“退格”键)
        .esc     对键盘esc按键修饰
        .space   对键盘的空格按键修饰
        .up      对 上
        .down    下
        .left    左
        .right   右
-->
        </br>
        </br>
    <input type="text" v-model="msg" @keyup.enter.left.right.up.down.tab.delete.esc.space="test4">


    </div>
</body>
</html>

<script src="js/vue.js"></script>

<script>
    new Vue({
        el:"#app",
        data:{
            msg:"小明",
            cls1:"aa",
            cls2:"bb",
            cls3:"cc",
        },
        methods:{
            test() {
                alert('点我')
            },
            test1() {
                alert('点我1')
            },
            test2() {
                alert('点我2')
            },
            test3() {
                alert('点我3')
            },
            testHref(){
                console.log('跳转百度')
            },
            test4(){
                console.log('按键修饰符')
            }
        },
        computed:{
        }
    })
</script>
